<template>
	<view class="page-con">
		<view class="page-content">
		<view  :style="{ 'top': safeAreaInsetTop + 'px' }" class="page-title">我的</view>
		<view class="header">
			<view   @click="jump('/subUserInfo/userInfo')" class="img-con">
				<img :src="userInfo.avatar_url || userInfo.avatar ||  'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/logo.png'" alt="">
			</view>
			<view class="name">
				<view  @click="jump('/subUserInfo/userInfo')"  class="text oellipsis">{{userInfo.nickname||'点击登录' }}</view>
				<view v-if="userInfo.unique_id" class="num">
					<text>ID: {{ userInfo.unique_id}}</text>
				</view>
				<view  v-if="userInfo.unique_id && userInfo.role == 2 " @click="changeRole(1)" class="change-role">切换到房客</view>
			</view>
		</view>
		<view v-if="userInfo.subscribed_official_account !=1" @click="showerweima"  class="notice-tips">点击关注ViHome公众号，及时接收订单提醒</view>
		<view   class="list-con">
			<view class="my-s-title">我的房源订单</view>
			<view class="flex-between list">
				 <view v-for="(item, index) in tabList" :key="index" @click="goPage(item)" class="list-item">
					 <view class="icon-con">
						 <img :src="item.icon" alt="">
						 <span v-if="item.total">{{item.total}}</span>
					 </view>
					{{item.title}}
				 </view>
				
			</view>
			
		</view>
		
		<!-- <view  @click="changeRole(2) "  v-if="userInfo && userInfo.role == 1" class="apply-btn-con">
			 <view class="btn">
			 	申请成为房东
			 </view>
		</view> -->
		</view>
	
		<view  @click="showerweima" class="wx-tips">关注vihome公众号</view>
		
		<view v-if="userInfo.role == 1" class="check-in-list">
			<view v-for="(item,index) in orderList" :key="index" @click="goOrderDetail(item)" class="list-item">
				待入住提醒 {{item.snapshot.info.city.city}} {{item.time}} 	<van-icon  name="arrow" />
			</view>
		</view>
	
	
	 <loginConfirm @loginSuccess="init" ref="loginRef"></loginConfirm>
	 <erweima ref="erweimaRef">
		<template v-slot:headerTips>
			<view class="grey-tips" >长按二维码关注公众号，</view>
			<view class="grey-tips">及时接收订单数据</view>
		</template>
		<template v-slot:footTips>
			<view class="mb20">公众号： Vihome微家觅房服务号</view>
			<view @click="copyText" class="color-orange" >复制</view>
		</template>
		
	 </erweima>
	 
	 <!-- <tabBar :current="2"></tabBar> -->
	</view>
</template>

<script>
	import loginConfirm from '@/components/dialog/loginConfirm.vue'
	import erweima from './erweima.vue'
	// import tabBar from '@/components/tabBar.vue';
	export default {
		components:{
		    loginConfirm,
			erweima,
			// tabBar
		},
		data () {
			return {
		        name:  '未登录',
				userInfo: '',
				tabList: [],
				orderList: [],
				statusList: [
					{
						icon: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/confirm.svg',
						title: '待确认',
						total: 0
					},
					{
						icon: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/pay.svg',
						title: '待支付',
						total: 0
					},
					{
						icon: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/payed.svg',
						title: '待入住',
						total: 0
					},
					{
						icon: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/confirm.svg',
						title: '已取消',
						total: 0
					},
					{
						icon: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/refund.svg',
						title: '待退款',
						total: 0
					},
					{
						icon: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/confirm.svg',
						title: '已退款',
						total: 0
					},
					{
						icon: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/confirm.svg',
						title: '已完成',
						total: 0
					},
				],
				safeAreaInsetTop: this.$getTopHeight()
			}
		},
		methods: {
			init() {
				if(this.$getStorage('token')) {
					this.getInfo()
				} else {
					this.tabList = [
							{
								title: '全部订单',
								status: '',
								icon: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/order-all.svg',
								total: 0
							},
							{
								icon: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/confirm.svg',
								title: '待确认',
								total: 0
							},
							{
								icon: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/pay.svg',
								title: '待支付',
								total: 0
							},
							{
								icon: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/refund.svg',
								title: '待入住',
								total: 0
							}
					   ];
				}
			},
			getOrderStatus() {
				this.$http.getOrderStatus().then(res => {
					this.tabList = [{
						title: '全部订单',
						status: '',
						icon: 'https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/order-all.svg',
						total: 0
					}];
					res.map(item =>{
						// if(item.status == 2 && this.userInfo.role == 2) {
						//    item.total = 0;
						// }
						 item.title = this.statusList[item.status].title;
						  item.icon = this.statusList[item.status].icon;
					});
					this.tabList.push(...res);
				})
			},
			 changeRole(type) {
				let data = {
					role: this.userInfo.role == 1?2: 1
				}
				this.$http.changeRole(data).then(res => {
					this.$setStorage('userInfo', res)
					this.userInfo =  res;
					 if(res.role == 1) {
						 this.$toast('当前为房客状态')
					 } else {
						 this.$toast('当前为房东状态')
					 }
					 this.getOrderStatus();
					 if(type == 2) {
						 this.goIndex()
					 }
				})
			},
		    goIndex() {
				// 跳转到 tabBar 页面
				uni.switchTab({
				    url: '/pages/index/index'
				});
			},
			copyText() {
			      uni.setClipboardData({
			        data: 'Vihome微家觅房服务号',
			        success: () => {
			          uni.showToast({
			            title: '复制成功',
			            icon: 'success'
			          });
			        },
			        fail: () => {
			          uni.showToast({
			            title: '复制失败',
			            icon: 'none'
			          });
			        }
			      });
			 },
			jump(path) {
				if(this.$isLogin()) {
				   this.$goPage(1, path );
				  return;
				}
				this.$refs.loginRef.show();
			},
			goOrderDetail(data) {
			   this.$goPage(1, '/subOrder/orderDetail?orderNumber=' + data.order_number);
			},
			goPage(item) {
				if(this.$isLogin()) {
					console.log(item.status, 'item.status')
				   this.$goPage(1,'/subOrder/orderList?status='+ item.status );
				  return;
				}
				this.$refs.loginRef.show();
			},
			showerweima() {
				this.$refs.erweimaRef.show();
			},
			getInfo() {
				this.$http.getUserInfo().then(res => {
					this.$setStorage('userInfo', res)
					this.userInfo =  res;
					if(this.userInfo.role == 1) {
						this.getOrderList()
					}
					this.getOrderStatus();
				})
			},
			getOrderList() {
				const searchData = {
					limit: 5,
					page: 1,
				}
				this.$http.getPaidList(searchData).then(res => {
					res.data.map(item=>{
						item['time'] = item.start_date.slice(5,10).replace('-', '/') + '-'  +  item.end_date.slice(5,10).replace('-', '/');
					})
				   this.orderList  = res.data;
				})
			 },
		},
		onShow() {
			this.init();
			
		}
	}
</script>

<style  lang="scss" scoped >
	.page-con {
		width: 100%;
		min-height: 100vh;
		// background: #F7F7F7;
		background:url('https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/bg.jpg') no-repeat;
		background-size:cover ;
		overflow: hidden;
        overflow-y: auto;		
			
		.bg-img {
			position: fixed;
			left: 0;
			top:0;
			
		}
		.page-content {
			.page-title {
				text-align: center;
				margin-top: 20rpx;
				font-size: 30rpx;
				color: black;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
			// position: absolute;
			// z-index: 9999;
			// left: 0;
			// top:0;
		}
	}
	.header {
		margin-top: 160rpx;
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		.img-con {
			width: 140rpx;
			height: 140rpx;
			display: inline-block;
			vertical-align: middle;
			border-radius: 50%;
			overflow: hidden;
			img {
				width: 100%;
				height: 100%;
			}	
		}
		.name {
			display: inline-block;
			vertical-align: middle;
			color: #212121;
			margin-left: 30rpx;
			width: 515rpx;
			.text {
				font-weight: 500;
				font-size: 36rpx;
			}
			.num {
				display: flex;
				align-items: center;
				margin-top: 6rpx;
				font-size: 24rpx;
			}
			.change-role {
				background: #E33838;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				padding: 6rpx 20rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				display: inline-block;
			}
		}
	}
		
	.list-con {
		width: 678rpx;
		margin: 30rpx auto;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 30rpx 6rpx rgba(185,166,144,0.1);
		border-radius: 12rpx ;
		.list {
			padding: 25rpx;
			font-size: 25rpx;
			color: #222;
			.list-item {
				text-align: center;
				
				.icon-con {
					position: relative;
					span {
						display: inline-block;
						position: absolute;
						background: #E33838;
						border-radius: 50%;
						// padding: 5rpx 12rpx;
						min-width: 30rpx;
						height: 30rpx;
						line-height: 30rpx;
						padding: 2rpx;
						text-align: center;
						font-size: 18rpx;
						color: #FFFFFF;
						top:-15rpx;
						right:-5rpx;
					}
				}
				img {
					width: 45rpx;
					height: 45rpx;
				}
			}
		}
	}
	.apply-btn-con{
		width: 100%;
		
		.btn {
			width: 678rpx;
			height: 91rpx;
			line-height: 91rpx;
			background: #FFFBE1;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 2rpx solid #FCE353;
			margin: 60rpx auto;
			font-weight: 500;
			font-size: 27rpx;
			color: #F8BB1F;
			text-align: center;
		}
	}
	.wx-tips {
		width: 100%;
		text-align: center;
		font-size: 27rpx;
		color: #C7B6A1;
		line-height: 32rpx;
		margin-top: 30rpx;
		
	}
	.check-in-list {
		width: 100%;
		position: fixed;
		bottom: 30rpx;
		color: #222222;
		.list-item {
			width: 611rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #FCE353;
			border-radius: 121rpx;
			text-align: center;
			font-size: 27rpx;
			margin: 20rpx auto;
		}
	}
	.notice-tips {
		width: 100%;
		padding: 10rpx;
		background-color:#fff8ee ;
		color: #ec8403;
		font-size: 24rpx;
		text-align: center;
		
		
		
	}
</style>
